﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现圆盘活动抽奖程序效果 - xw素材网</title>


<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* demo */
.demo{width:417px;position:relative;margin:50px auto 0 auto;}
#disk{width:417px;height:417px;overflow:hidden;background:url(disk.png) no-repeat;}
#start{width:164px;height:320px;position:absolute;top:48px;left:126px;}
#start img{cursor:pointer;}
</style>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<!-- <script type="text/javascript" src="jquery.easing.min.js"></script> -->
<script type="text/javascript">
/*$(function(){
	$("#startbtn").rotate({
		bind:{
			click:function(){
				var a = Math.floor(Math.random() * 360);
				 $(this).rotate({
					 	duration:3000,
					 	angle: 0, 
            			animateTo:1440+a,
						easing: $.easing.easeOutSine,
						callback: function(){
							alert('中奖了！'+a);
							
						}
				 });
			}
		}
	});
});*/

<!--需要服务端php运行环境-->
$(function(){ 
     $("#startbtn").click(function(){ 
        lottery(); 
    }); 
}); 
function lottery(){ 
    $.ajax({ 
        type: 'POST', 
        url: 'data.php', 
        dataType: 'json', 
        cache: false, 
        error: function(){ 
            alert('出错了！'); 
            return false; 
        }, 
        success:function(json){ 
            $("#startbtn").unbind('click').css("cursor","default"); 
            var a = json.angle; //角度 
            var p = json.prize; //奖项 
            $("#startbtn").rotate({ 
                duration:3000, //转动时间 
                angle: 0, 
                animateTo:360+a, //转动角度 
                easing: $.easing.easeOutSine, 
                callback: function(){ 
                    var con = confirm('你，中得'+p+'\n还要再来一次吗？'); 
                    if(con){ 
                        lottery(); 
                    }else{ 
                        return false; 
                    } 
                } 
            }); 
        } 
    }); 
} 


</script>

</head>
<body>


<div class="demo">
	<div id="disk"></div>
	<div id="start"><img src="start.png" id="startbtn"></div>
</div>

</body>
</html>